<!--
 * @Author: your name
 * @Date: 2021-04-16 14:06:27
 * @LastEditTime: 2021-04-20 22:00:38
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /dvr-ui/src/components/main-search.vue
-->
<template>
  <div>
    <el-row>
      <el-col style="text-align:center;">
        <h1>视频搜索界面</h1>
      </el-col>
    </el-row>
    <el-row>
      <el-col style="text-align:center;">
        <el-input placeholder="请输入内容"
                  type='text'
                  v-model="input"
                  class="input-with-select"
                  @keyup.enter.native="search(input,selected)">

          <el-select v-model="selected"
                     slot="prepend"
                     style="text-align: center"
                     placeholder="请选择搜索类型">
            <el-option label="视频标题"
                       value="1"></el-option>
            <el-option label="视频id"
                       value="2"></el-option>
          </el-select>
          <el-button slot="append"
                     icon="el-icon-search"
                     @click="search(input,selected)"></el-button>
        </el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col :offset="1">
      </el-col>
    </el-row>
    <div style="text-align: center"
         id="cards">
      <!-- 使用js在此处动态添加卡片 -->
      <wxcard :fileList="fileList"></wxcard>
    </div>
    <el-row>
      <el-col :span="12"
              :offset="6"
              style="text-align: center">
        <div id="pag"
             class="grid-content bg-purple"
             style="display:none">
          <el-pagination background
                         layout="prev, pager, next"
                         :total="mvTotal"
                         style="paginationStyle"></el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>

</template>

<script>
import { search } from '../methods/base'
import wxcard from '../components/card'
export default {
  components: {
    wxcard,
  },
  data () {
    return {
      input: '',
      selected: '1',
      mvTotal: 0,
      fileList: [],
      sName: '',
      sTag: '',


    }
  },
  methods: {
    // 搜索视频
    search,

  }

}
</script>

<style>
.input-with-select {
  background-color: #fff;
}
</style>